<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>留言板</title>
	</head>
	<body>
		<div id="app" class="p-5 d-flex">
			<my-input @myevent="getComment"></my-input>
			<my-content :comments="comments" @myevent="getEvent"></my-content>
		</div>

		<template id="mycontent">
			<div class="mycontent card ml-5 w-50 p-1">
				<h2>留言板</h2>
				<ul>
					<li v-for="(item,index) in comments" class="clear text-white senditem mr-4" :key="index">
						<div class="touxing clear">
							<p class="title"> {{item.title}}</p>
							<img class="img-fluid head rounded-circle" src="./img/touxiang.jpg" alt="">
							<span class="author"> {{item.author}}</span>
							<div class="newsnum d-flex float-right mr-5">
								<img class="img-fluid head mr-5" @click="changeImg(index,$event)" :src="item.img" alt="img">
								<img class="img-fluid head" src="./img/news.png" alt="img">					
								<span>
									&nbsp;{{item.newsnum}}
								</span>
							</div>

						</div>
						<div class="text">
							<p class="time">{{item.time}}</p>
							<p class="content">{{item.content}}</p>
							<ul class="newsend">
								<!-- 回复 -->
								<li v-for="(value,newindex) of item.newcontent" :key="newindex">
									<img class="img-fluid head rounded-circle" src="./img/touxiang.jpg" alt="">
									<span>Admin</span>
									
									<div class="text clear">
										<p class="time">{{value.nowtime}}</p>
										<p class="content d-inline"><span class="huifuzuozhe">回复 {{item.author}}:
											</span><span class="newtext">{{ value.text }}</span></p>
										<span @click="deletenew(index,newindex)"
											class="float-right pr-5 newdelete">删除</span>
									</div>

								</li>
							</ul>
							<textarea cols="10" rows="2" @change="datachange" class="form-control"
								placeholder="输入评论..."></textarea><br>
							<button class="btn btn-info" @click="sendnewdata(index)">发送</button>
							<ul class="reList">
								<li>
									<span class="reauthor"></span>
								</li>
							</ul>
						</div>

						<span v-if="item.flag == 1" @click="deleteitem(index)" class="float-right delete">删除</span>
					</li>
				</ul>
			</div>
		</template>

		<template id="myinput">
			<div class="myinput card w-50 p-5">
				<h2>发表留言</h2>
				主题：<input type="text" v-model="data.title" class="form-control w-50"><br>
				署名：<input type="text" v-model="data.author" class="form-control w-50"><br>
				内容：<textarea cols="30" rows="10" class="form-control" v-model="data.content"></textarea><br>
				<button class="btn btn-info" @click="getContent">提交</button>
			</div>
		</template>
	</body>
</html>
